<style>
    body{
        text-align:center; /* hack para o IE */
        background-image: url("<?php echo PATH_DIR_TEMPLATE_URL; ?>images/background/wallpaper-windows-8-m3-82.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%; /* A imagem ocupar todo o viewport */
    }

    /* Inicio - Recuperar */
    .box_recuperar {
        text-align: left;
        width:302px;
        height:370px;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-185px;
        margin-left:-151px;
    }

    .box_recuperar h1,.box_recuperar h2,.box_recuperar h4 {
        color: #ffffff;
    }

    .metro .box_recuperar a{
        float: right;
        padding: 0 10px 0 0;
    }
    .metro .box_recuperar a:hover{
        color: white;
    }

    /* Fim - Login */
</style>

<div class="box_recuperar">

    <h1>
        <div style="float:left;">
            <a href="index.php?Index/logon"><i class="icon-arrow-left-3 fg-white smaller"></i></a>
        </div>
        <div style="float:left;"><?php echo NAME_SIS; ?></div>
        <div class="clear"></div>
    </h1>
    
    <form class="form" name="fLogin" id="fLogin" action="index.php?Security/recuperar" method="post" style="margin-top: 20px;">

        <div style="width: 300px;">

            <h2>Recupere sua senha</h2>
            <div class="input-control text">
                <input type="text" name="numeroCPF" id="numeroCPF" maxlength="14" required="" placeholder="Digite o numero do CPF" />
                <button class="btn-clear"></button>
            </div>

            <div style="margin-top: 10px;">
                <button class="large primary" style="float: left;">
                    <i class="icon-enter on-left"></i>
                    Recuperar senha
                </button>
                <di class="clear"></di>
            </div>

        </div>

    </form>   
</div>